import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import * as ActionCreators from '../actions';

function Counter({ increment, decrement, undo, redo, value }) {

    console.log('[containers/Counter.js] ->Counter');

    return (
        <p>
            Clicked: {value} times
            {' '}
            <button onClick={increment}>+</button>
            {' '}
            <button onClick={decrement}>-</button>
            {' '}
            <button onClick={undo}>Undo</button>
            {' '}
            <button onClick={redo}>Redo</button>
        </p>
    );
}

Counter.propTypes = {
    increment: PropTypes.func.isRequired,
    decrement: PropTypes.func.isRequired,
    undo: PropTypes.func.isRequired,
    redo: PropTypes.func.isRequired,
    value: PropTypes.number.isRequired
};

//组件连接, 把state 和 actions 传入 Counter 组件。隐藏 dispatch,直接调用action
export default connect(
    // 由于高阶函数undoable的作用，此时的state.counter已经不是计数器的当前数值了，
    // 应该将其改为state.counter.present。
    state => ({ value: state.counter.present }),
    ActionCreators
)(Counter);
